<template>
   <nav-bar></nav-bar>
  <div class="event-container">
    <div class="event-left">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span class="header-text">事件处理</span>
            <!-- 这里要写一个点击事件，函数处理的就是添加事件的逻辑 -->
            <el-button
              type="primary"
              plain
              @click="toAddEvent"
              >添加事件</el-button
            >
          </div>
        </template>
        <!-- 这里就是显示表格数据的部分，分页请求 -->
        <div>
          <el-table :data="tableData">
            <el-table-column
              fixed
              prop="type"
              label="类型"
              width="70"
            />
            <el-table-column
              prop="grade"
              label="等级"
              width="70"
            />
            <el-table-column
              prop="lnglat"
              label="经纬度"
              width="350"
            />
            <el-table-column
              prop="address"
              label="发生地点"
              width="250"
            />
            <el-table-column
              prop="submit_time"
              label="上报时间"
              width="200"
            />
            <el-table-column
              prop="description"
              label="事件描述"
              width="500"
            />
            <el-table-column
              prop="car_number"
              label="车牌号"
              width="120"
            />
            <el-table-column
              fixed="right"
              label="处理状态"
              width="200"
            >
              <!-- 这里是一个插槽，给插槽绑定数据，否则不能识别，会报错 -->
              <template #default="tableData">
                <!-- 可以拿到这一行数据对应的id -->
                <el-button
                  plain
                  type="success"
                  size="small"
                  @click.prevent="handlePass(tableData.row)"
                  >通过</el-button
                >
                <el-button
                  plain
                  type="warning"
                  size="small"
                  @click.prevent="handleIgnore(tableData.row)"
                  >忽略</el-button
                >
                <el-button
                  type="info"
                  plain
                  size="small"
                  @click.prevent="queryEventPoint(tableData.row)"
                  >查询</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="left-pagecontrol">
          <el-pagination
            v-model:current-page="myPage"
            :page-size="9"
            layout="total, prev, pager, next"
            v-model:total="myTotal"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
    <!-- 这里开始就是右侧的部分了 -->
    <div class="event-right">
      <div class="right-chart">
        <div class="chart-pie">
          <e-charts :option="pieOption" />
        </div>
        <div class="chart-line">
          <e-charts :option="lineOption" />
        </div>
      </div>
      <div
        id="map"
        class="right-map"
      ></div>
    </div>
  </div>
</template>
<script setup>
import { EventHttp } from "../../http/event"
import { onMounted, ref, inject } from "vue"
import { initMap } from "./Hooks/useInitMap"
import { getEventTable } from "./Hooks/useGetEventTable"
import { getEventPie } from "./Hooks/useGetPieData"
import { getEventLine } from "./Hooks/useGetLineData"
import { useRouter } from "vue-router"
import { ElMessage } from "element-plus"
import NavBar from "../../components/NavBar.vue"
const router = useRouter()
const { lineOption } = getEventLine()
const { pieOption } = getEventPie()
const row = ref([])
const status_color = ref("")
const { queryEventPoint, updateEventPoint } = initMap({ row, status_color })
/* 给表格绑定的数据 */
const tableData = ref([])
/* 控制表格分页的变量 */
/* 当前所在的页数 */
const myPage = ref(1)
/* 表格中数据的总条数 */
const myTotal = ref(0)

onMounted(() => {
  initMap({ row, status_color })
  getEventTable(tableData, myPage, myTotal)
  getEventPie()
  getEventLine()
  //console.log(111)
})

/* reload() */
/* 分页器页数改变的时候的回调函数 */
function handleCurrentChange(nowPage) {
  //console.log(nowPage)
  myPage.value = nowPage
  getEventTable(tableData, myPage, myTotal)
}

function toAddEvent() {
  router.push("/middle/addevent")
}

/* 忽略事件的函数 */
const handleIgnore = async (row) => {
  let { id } = row
  let res = await EventHttp.ignoreEvent(id)
  updateEventPoint(row, "yellow")
  if (res.code == 200) {
    console.log("忽略这个事件成功")
    ElMessage({
      message: "忽略事件成功！",
      type: "success",
    })
  }
  getEventTable(tableData, myPage, myTotal)
}

/* 这个通过事件的函数 */
const handlePass = async (row) => {
  let { id } = row
  let res = await EventHttp.passEvent(id)
  updateEventPoint(row, "green")
  if (res.code == 200) {
    ElMessage({
      message: "通过事件成功！",
      type: "success",
    })
  }
  getEventTable(tableData, myPage, myTotal)
}
</script>
<style lang="stylus" scoped>

.event-container
    width:100%
    height:90vh
    display:flex
    .event-left
        width:50%
        height:100%
        /* background-color:orange */
        display:flex
        justify-content: space-around;
        align-items: center;
        .box-card
          width:96%
          height:97%
          position:relative
          overflow:auto
          .card-header
            display: flex;
            justify-content: space-between;
            align-items: center;
            .header-text
              font-size:30px
              font-weight:600
          .left-pagecontrol
            bottom:17px
            position:absolute
    .event-right
        width:50%
        height:100%
        .right-chart
          height:50%
          width:96%
          margin:0 auto
          display:flex
          align-items:center
          justify-content:space-evenly
          .chart-pie
            width:45%
            height:95%
            border:1px solid #eee
            border-radius:5px
          .chart-line
            width:55%
            height:95%
            border:1px solid #eee
            border-radius:5px
        .right-map
          height:48.5%
          width:96%
          margin:0 auto
</style>
